<template>
  <div>
    <div>
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:9000/hemo/file/upload" :on-success="filesUploadSuccess"
          multiple>
        <i class="el-icon-upload"></i>·
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <div style="width: 80%;height: 40%">

        <div v-if="form.img!=''">
          <h4>基本设置</h4>
          <el-form ref="form" size="222px" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="标题" prop="videoTitle">
              <el-input style="width: 600px" v-model="form.videoTitle"></el-input>
            </el-form-item>
            <el-form-item label="是否转载" prop="videoReprintsite">
              <el-radio v-model="form.videoReprintsite" label="0">否</el-radio>
              <el-radio v-model="form.videoReprintsite" label="1">是</el-radio>
            </el-form-item>
            <el-form-item label="转载地址" v-if="form.videoReprintsite==1" prop="url">
              <el-input style="width: 200px" v-model="form.url"></el-input>
            </el-form-item>
            <el-form-item label="分区" prop="value">
              <div class="block">
                <el-cascader
                    :options="options"
                    v-model="form.value"
                    @change="handleChange"
                    :separator="' '"
                >
                </el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="标签" prop="res">
              <div>
                <el-checkbox-group v-model="form.res">
                  <el-checkbox-button v-for="city in kens" :value="city.videoTagId" :label="city.videoTagId"
                                      :key="city.videoTagId">{{ city.videoTagName }}
                  </el-checkbox-button>
                </el-checkbox-group>
              </div>
            </el-form-item>
            <!--        video_suggest-->
            <el-form-item label="推荐文字" prop="videoSuggest">
              <el-input style="width: 600px" v-model="form.videoSuggest"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ax from "axios";

export default {
  name: "con",
  data() {
    var validateRes = (rule, value, callback) => {
      if (this.form.res.length < 1) {
        return callback(new Error('不能为空!!'))
      }
      if (this.form.res.length > 10) {
        return callback(new Error('最大只能选择10个!!'))
      }
      callback()
    }
    var validateVideoTitle = (rule, value, callback) => {
      if (this.form.videoTitle.length < 1) {
        return callback(new Error('不能为空!!'))
      }
      if (this.form.videoTitle.length > 50) {
        return callback(new Error('标题不能大于五十个文字!!'))
      }
      callback()
    }

    return {
      form: {
        videoTitle: '',
        res: [],
        videoReprintsite: '0',
        value: [1, 1],
        url: '',
        img: '',
      },
      options: [],
      kens: [],
      rules: {
        videoTitle: [{required: true,validator: validateVideoTitle, trigger: 'blur'}],
        res: [{required: true, validator: validateRes, trigger: 'change'},],
        value: [{required: true, message: '分区不能为空', trigger: 'change'},],
        videoReprintsite: [{required: true, trigger: 'onChange'},],
        url: [{required: true, message: '路径不能为空', trigger: 'blur'},]
      },
    }
  },
  created() {
    this.load();
  },
  methods: {
    filesUploadSuccess(res) {
      console.log(res);
      this.form.img = res.name
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          this.$message({
            type: "error",
            message: '数据填写不正确！'
          })
        } else {
          if (!this.form.videoSuggest) {
            this.form.videoSuggest = ''
          }
          let user = sessionStorage.getItem("user")
          var users = JSON.parse(user)
          this.$http.get("hemo/system/video/add?videoTitle=" + this.form.videoTitle + "&res=" + this.form.res + "&videoReprintsite="
              + this.form.videoReprintsite + "&value=" + this.form.value[1] + "&url=" + this.form.url + "&img=" + this.form.img + "&videoSuggest=" + this.form.videoSuggest + "&Uid=" + users.userId)
              .then(r => {
                this.$refs.form.resetFields()
                this.$router.push(`/DeliveringSuccessful`);
              })
        }
      })
    },
    handleChange(value) {
      console.log(value);
    },
    load() {
      this.$http.get("hemo/system/bigzone/findAll").then(r => {
        for (let i = 0; i < r.data.data.length; i++) {
          // console.log(r.data.data[i])
          if (r.data.data[i] != null) {
            var a = {
              value: r.data.data[i].bigzoneId,
              label: r.data.data[i].bigzoneName,
              children: []
            };
            for (let j = 0; j < r.data.data[i].smallzones.length; j++) {
              if (r.data.data[i].smallzones[j] != null) {
                a.children.push({
                  value: r.data.data[i].smallzones[j].smallzoneId,
                  label: r.data.data[i].smallzones[j].smallzoneName,
                })
              }
            }
            this.options.push(a)
          }
        }

        this.$http.get("hemo/system/tag/findAll").then(r => {
          console.log(r.data.data)
          this.kens = r.data.data
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
